.header {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 25px;
    padding: 0 10px;
    vertical-align: middle;

    .header-button {
        display: inline-block;
        vertical-align: middle;
        height: 25px;
        line-height: 25px;
        border: none;
        padding: 4px 5px;
        background: none;
        color: #494949;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    .header-button:hover {
        opacity: 0.8;
        filter: alpha(opacity=80);
        color: #5F5F5F;
    }

    .header-button.active {
        opacity: 1;
        filter: alpha(opacity=100);
        background-color: #ddd;
        color: #5F5FFF;
    }

    .header-button+.header-button {
        margin-left: 10px;
    }
}

.property {
    width: 200px;
    height: calc(100% - 30px);
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    position: absolute;
    top: 30px;
    right: 0;
}

.graphview {
    position: absolute;
    top: 30px;
    left: 0;
}

.lil-gui {
    --background-color: #f5f5f5;
    --text-color: #111;
    --title-background-color: #f5f5f5;
    --title-text-color: #111;
    --widget-color: #454545;
    --hover-color: #656565;
    --focus-color: #595959;
    --number-color: #2cc9ff;
    --string-color: #a2db3c;
}